<template>
<div id="index">
  <el-container>
    <el-header height="auto">
      <div class="header">
        <div class="demo-image"></div>
      </div>
      <div style="display: flex;justify-content:space-around">
      <div style="font-size: 18px; line-height: 65px;">律师电子名片</div>
      <div style="width: 900px">
      <el-form :inline="true" :model="ecardForms" class="demo-form-inline" style="height: 55px">
          <el-form-item label="姓名">
            <el-input v-model="ecardForms.ename" placeholder="张三"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="ecardForms.egender" clearable>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职称">
            <el-select v-model="ecardForms.eprofessionalTitle" clearable >
              <el-option label="一级律师" value="一级律师"></el-option>
              <el-option label="二级律师" value="二级律师"></el-option>
              <el-option label="三级律师" value="三级律师"></el-option>
              <el-option label="四级律师" value="四级律师"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="queryFuzzy(ecardForms)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
        <div style="width: 150px;height: 50px ">
          <div style="font-size: 17px; margin: 5px auto;color: #909399" >{{user.username}},欢迎您</div>
          <el-link type="primary" v-if="user.rid==1" @click="myprimary" :underline="false">我的预选单</el-link>
          <el-link type="primary" v-if="user.rid==2" @click="myecard" :underline="false">我的名片</el-link>
          <el-link type="primary" v-if="user.rid==3" @click="myadmin" :underline="false">管理员入口</el-link>
          <el-link type="warning" @click="loginout" style="margin-left: 5px" :underline="false">退出</el-link>

        </div>
      </div>
      <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="display: flex;justify-content: space-around"
      >
        <el-menu-item  v-for="(item) in categorys" @click="selectcategory(item.id)">{{item.college}}</el-menu-item>
      </el-menu>
    </el-header>
    <el-main class="el-main" style="min-height: 550px;">
        <div class="card-f" v-for="(item) in ecards" @click="ecardDetail(item.id)">
          <div class="card-a">
            <img :src='item.eimg' style="max-height: 150px;max-width: 150px">
          </div>
          <div class="card-b">
            {{item.ename}}
          </div>
          <div class="card-c">
            <p>职称：{{item.eprofessionalTitle}}</p>
            <p>事务所：{{item.ecollege}}</p>
            <p>联系地址：{{item.eteachOffice}}</p>
          </div>
        </div>

    </el-main>
    <el-pagination
        background
        layout="prev, pager, next"
        :total=total
        :page-size='4'
        @current-change="page"
    style="display: flex;justify-content: center;margin-bottom: 30px">
    </el-pagination>
    <foot></foot>
  </el-container>
</div>
</template>

<script>
import {logout, querycategory} from "@/api/vcard";
import {queryvcardbycid} from "@/api/vcard";
import {queryFuzzyecards} from "@/api/vcard";
import Foot from "@/components/foot";
export default {
  name: "index",
  components: {Foot},
  data() {
    return {
      total: null,
      ecards:[],
      ecardForms: {
        ename: "",
        eprofessionalTitle: "",
        egender: "",
      },
      categorys:[
        {
          college: "人文学院",
          id: "1",
        }
      ],
      activeIndex: '1',
      activeIndex2: '1',
      currentCid: 1,
      isSearch:false,
      user:{}
    };
  },
  //初始化
  created() {
    querycategory().then((res)=>{
      console.log(res);
      this.categorys = res.result
      sessionStorage.setItem("categorys",JSON.stringify(res.result))
    })

   this.getData(1,1)
  },
  mounted() {
    this.user=JSON.parse(sessionStorage.getItem("user"))
    console.log(this.user)
  },
  methods: {
    //管理员
    myadmin(){
      this.$router.push({
        name : 'Admin',

      });
    },
    //我的名片
    myecard(){
      this.$router.push({
        name : 'ecarddetail',
        query :{
          uid : this.user.id,
        }
      });
    },
    myprimary(){
      this.$router.push({
        name : 'myprimary',
        query :{
          uid : this.user.id,
        }
      });
    },
    //我的预选单

    //退出
    loginout(){
      logout().then(response => {
          if(response.success){
            sessionStorage.removeItem("user")
            this.$router.push({
              name :'Login'
            })
          }
          else {
              alert(response.message)
          }
      })



    },
    //根据院系类别查询名片
    getData(cid,current){
      queryvcardbycid(cid,current,4).then(res => {
        this.ecards=res.result.records
        this.total=res.result.total
        this.isSearch = false
      })
    },

    page(currentPage){
      console.log(currentPage);
      if (this.isSearch){
        queryFuzzyecards(this.ecardForms,currentPage,4).then(response => {
          console.log(response);
          this.ecards=response.result.records
          this.total=response.result.total
          this.isSearch = true
        })
      }else{
        this.getData(this.currentCid,currentPage)
      }
    },
    //模糊查询
    queryFuzzy(ecardForms){
      this.ecardForms=ecardForms
      queryFuzzyecards(ecardForms,1,4).then(response => {
        console.log(response);
        this.ecards=response.result.records
        this.total=response.result.total
        this.isSearch = true
      })
      // console.log(ecardForms)
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //查询院系类别
    selectcategory(id) {
      console.log(id);
      this.currentCid = id
      this.getData(id,1)
    },
    //名片详情跳转
    ecardDetail(id){
      console.log(id);
      this.$router.push({
        name : 'ecarddetail',
        query :{
          id : id
        }
      });
    }
  },

}
</script>

<style scoped>
.el-header{
  padding: 0;
}
.el-menu.el-menu--horizontal{

     display: flex;
     justify-content: flex-start;
}
.demo-form-inline{
    margin-top: 10px;
}
.header{
  display: flex;
}
.demo-image{
  flex: 1;
  background :url("../images/banner.png") no-repeat;
  background-size: 100% 100%;
  height :150px;
  width :100%;
}

.el-main{
  margin: auto;
  width: 80%;
  display: flex;
  justify-content:space-around;
}
.card-f{
  width: 200px;
  height: 400px;
  text-align: center;
  color: #337ab7;
  text-decoration: none;
  background-color: transparent;
  vertical-align: top;
  box-shadow: 1px 1px 13px 4px #ccc;

}
.card-a{
  width: 150px;
  height: 150px;
  margin: 20px auto;
}
.card-b{
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #333333;
}
.card-c{
  padding: 0 17px;
  font-size: 14px;
  color: #656565;
  line-height: 24px;
  text-align: left;
}
.img{
  position: absolute;
  top: 40px;
  left: 60px;
}
</style>